// 引入变量
@import './variables.scss';

// 弹性布局
@mixin flex($direction: row, $justify: flex-start, $align: center, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 绝对定位
@mixin absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 固定定位
@mixin fixed($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: fixed;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

// 单行文本截断
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本截断
@mixin text-truncate-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 响应式媒体查询
@mixin screen-xs {
  @media (min-width: $breakpoint-xs) {
    @content;
  }
}

@mixin screen-sm {
  @media (min-width: $breakpoint-sm) {
    @content;
  }
}

@mixin screen-md {
  @media (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin screen-lg {
  @media (min-width: $breakpoint-lg) {
    @content;
  }
}

@mixin screen-xl {
  @media (min-width: $breakpoint-xl) {
    @content;
  }
}

// 过渡动画
@mixin transition($properties: all, $duration: $transition-base, $timing: ease) {
  transition-property: $properties;
  transition-duration: $duration;
  transition-timing-function: $timing;
}

// 卡片样式
@mixin card {
  background-color: $white;
  border-radius: $border-radius-md;
  box-shadow: $shadow-sm;
  padding: $spacing-md;
}

// 按钮基础样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xs $spacing-lg;
  border-radius: $border-radius-pill;
  font-weight: $font-weight-medium;
  cursor: pointer;
  transition: all $transition-base;
  border: none;
  outline: none;
}

// 禁用状态
@mixin disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

// 居中对齐
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 两端对齐
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 文本溢出省略号
@mixin text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 多行文本溢出省略号
@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 按钮样式
@mixin button($bg-color: $primary-color, $text-color: white, $hover-color: darken($bg-color, 10%)) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: $bg-color;
  color: $text-color;
  border: none;
  border-radius: $border-radius-pill;
  font-weight: $font-weight-medium;
  font-size: $font-size-base;
  cursor: pointer;
  transition: $transition-base;

  &:hover {
    background-color: $hover-color;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

// 图片响应式
@mixin responsive-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

// 精灵图定位
@mixin sprite($x, $y, $width, $height) {
  background-position: $x $y;
  width: $width;
  height: $height;
  display: inline-block;
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}
